<template>

  <div>
    <Table border
           :columns="columns1"
           :data="data1"
           sortable="custom"
           ref="table"
           size="small"
           width="1810"
    >
      <template slot-scope="{ row }" slot="icon">
        <Icon v-if="row.status=='PASS'" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
        <Icon v-if="row.status=='FAIL'" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
<!--        <Icon v-else type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>-->
      </template>

    </Table>
  </div>

</template>

<script>
export default {
  name: "table-expand",
  props: {
    row: Object
  },
  created() {
    debugger
    this.data1 = this.row.testcase_data
    console.log(this.data1)
  },

  data() {
    return {
      columns1: [
        {
          title: "用例名称",
          key: "testcase_name",
          width: 180,
          align: 'center'
        },
        {
          title: "接口",
          key: "api_name",
          width: 140,
          align: 'center'
        },
        {
          title: "请求URL",
          key: "url",
          width: 230,
          align: 'center'
        },
        {
          title: "响应状态码",
          key: "actual_status_code",
          width: 113,
          align: 'center'
        },
        {
          title: "响应时长(ms)",
          key: "elapsed_ms",
          align: "center",
          width: 150,
        },
        {
          title: "响应结果",
          key: "actual_response_data",
          align: "center",
          width: 275,
          ellipsis: true,
          render: (h, params) => {
            let texts = params.row.actual_response_data
            if (params.row.actual_response_data != null) {
              if (params.row.actual_response_data.length > 30) {
                texts = params.row.actual_response_data.slice(0, 30) + '...' // 进行数字截取
              } else {
                texts = params.row.actual_response_data
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.actual_response_data)
              ])
            ])
          }
        },
        {
          title: "失败原因",
          key: "failure_reason",
          align: "center",
          width: 300,
          render: (h, params) => {
            let texts = params.row.failure_reason
            if (params.row.failure_reason != null) {
              if (params.row.failure_reason.length > 40) {
                texts = params.row.failure_reason.slice(0, 40) + '...' // 进行数字截取
              } else {
                texts = params.row.failure_reason
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.failure_reason)
              ])
            ])
          }
        },
        {
          title: "用例ID",
          key: "testcase_id",
          align: "center",
          width: 300,
        },
        {
          title: "测试结果",
          slot: "icon",
          align: "center",
          width: 120,
        },
      ],
      data1: []

    }
  }
}
</script>

<style scoped>

</style>
